<template>
  <view class="catecory">
    <!-- 搜索框 -->
    <Search-Bar></Search-Bar>

    <view class="main">
      <view class="left">
        <view
          v-for="(item, index) in categoryList"
          :key="index"
          :class="num === index ? 'left_pitch' : ''"
          @click="menuClick(index)"
          >{{ item.cat_name }}</view
        >
      </view>

      <scroll-view class="right" scroll-y :scroll-top="scrollTop">
        <view v-for="item in proDuct" :key="item.cat_id">
          <!-- 商品类名 -->
          <view class="product_name">
            <text>/</text>
            <text>{{ item.cat_name }}</text>
            <text>/</text>
          </view>

          <!-- 商品列表 -->
          <view class="product_content" scroll-y>
            <navigator
              v-for="item2 in item.children"
              :key="item2.cat_id"
              :url="'/pages/goods-list/index?id=' + item2.cat_id"
            >
              <image :src="item2.cat_icon" mode="widthFix" />
              <view>{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import SearchBar from "@/components/SearchBar";
export default {
  components: {
    SearchBar,
  },
  data() {
    return {
      categoryList: [],
      proDuct: [],
      num: 0,
      scrollTop: 0,
    };
  },
  onLoad() {
    //优化 1 判断缓存中有没有数据 缓存的默认值是一个空字符串 (h5的缓存默认是 null  )
    const category = uni.getStorageSync("category") || null;
    if (category) {
      // 有值  判断数据有没有过期 过期时间 自定义 1 分钟  =60s = 60* 1000
      if (Date.now() - category.tiem > 20 * 1000) {
        console.log("过期了");
        // 过期了 重新发送请求
        this.categoryLoad();
      } else {
        // 数据没有过期
        console.log("没有过期");
        // 左侧的标题数组 ["大家电","海外购"]
        this.categoryList = category.list;
        // 大家电对应的商品数据 数组
        this.proDuct = this.categoryList[0].children;
      }
    } else {
      // 没有值
      console.log("没有本地");
      this.categoryLoad();
    }
  },
  methods: {
    menuClick(index) {
      this.proDuct = this.categoryList[index].children;
      this.num = index;

      // 优化 每次点击left的商品分类,right列表都会从顶部显示
      this.scrollTop = Math.random() / 1000;
    },

    categoryLoad() {
      uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
        })
        .then((res) => {
          console.log(res[1].data.message);
          this.categoryList = res[1].data.message;
          this.proDuct = this.categoryList[0].children;
          uni.setStorageSync("category", {
            tiem: Date.now(),
            list: this.categoryList,
          });
        });
    },
  },
};
</script>

<style lang="scss">
.catecory {
  height: 100vh;

  .main {
    display: flex;
    height: 100%;
    overflow: hidden;
    .left {
      width: 200rpx;
      overflow: auto;

      .left_pitch {
        border-left: 6rpx solid #eb4450;
        color: #eb4450;
      }
      view {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 80rpx;
      }
    }
    .right {
      flex: 1;
      // overflow: auto; 有scroll-view滚动条

      .product_name {
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
        text {
          color: #ddd;
        }
        text:nth-child(2) {
          margin: 0 15rpx;
          color: #000;
        }
      }
      .product_content {
        display: flex;
        flex-wrap: wrap;

        navigator {
          width: 33.3%;
          text-align: center;

          image {
            // width: 60%;
            // 优化:固定值可以让页面刷新不会有图片拉长过程
            width: 100rpx;
            height: 100rpx;
          }
        }
      }
    }
  }
}
</style>
